<script setup>
import {ref} from 'vue';
import axios from "axios";
const requests = axios.create({
  //配置对象
  //基础路径，requests发出的请求在端口号后面会跟改baseURl
  baseURL: `${window.location.origin}`,
  //代表请求超时的时间5s
  timeout: 5000,
})
const isRelax = ref(false);
const taskFinish = ref(0);
// 定义请求函数
const fetchData = () => {
  requests("/api/datatest").then((res)=>{
    isRelax.value = res.data.sta.Task;
  })
};
setInterval(fetchData,60);
</script>

<template>
    <div class="task">
        <div class="taskTrue" v-if="isRelax">
            <div class="up-box-info">
              <div class="robot-img">
                <img src="@/assets/bilibili.png" alt="">
              </div>
              <div>任务进行</div>
              <div>87%</div>
            </div>
            <div class="up-down-ifo">
                <div class="time-text">
                    任务总共进行时间:
                </div>
                <div class="consume-time">
                    {{taskFinish}}min
                </div>
            </div>
        </div>
        <div class="taskFalse" v-else>
            无任务
        </div>
    </div>
</template>

<style scoped>
.task,.taskTrue,.taskFalse{
  width: 500px;
  height: 150px;
  background-color: #f0f0f0; /* 浅灰色背景 */
  cursor: pointer; /* 鼠标样式为指针 */
  transition: background-color 0.3s ease;
  border-radius: 10px;
}
.task{
  margin-top:20px;
  margin-left: 70px;
}
.taskTrue{
  display: flex;
  flex-direction: column;
}
.taskFalse{
  text-align: center;
  line-height: 150px;
  font-size: 30px;
}
.up-box-info{
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
}
.robot-img{
  height: 60px;
  width: 60px;
}
.robot-img img{
  width: 100%;
  height: 100%;
}
.up-down-ifo{
  height: 50px;
  display: flex;
  flex-direction: row;
  font-size: 25px;
  margin-left: 40px;
  align-items: center;
}
.consume-time{
  margin-left: 30px;
  margin-top: 2px;
}
</style>